<template>
  <div class="home">
    <!-- 背景轮播图 -->
    <div class="recommendPage">
            <!-- <swiper :options="swiperOption" ref="mySwiper">
              <swiper-slide><img src="../assets/img/1.png" alt=""></swiper-slide>
              <swiper-slide><img src="../assets/img/2.png" alt=""></swiper-slide>
              <swiper-slide><img src="../assets/img/3.png" alt=""></swiper-slide>
              <swiper-slide><img src="../assets/img/4.png" alt=""></swiper-slide>
            </swiper> -->
      <!-- 视频背景图 -->
      <div class="homepage-hero-module">
        <div class="video-container">
          <div :style="fixStyle" class="filter"></div>
          <video :style="fixStyle" muted='muted' autoplay loop class="fillWidth" v-on:canplay="canplay">
            <source src="../assets/MP4/Tour of a house.mp4" type="video/mp4"/>
          </video>
          <div class="poster hidden" v-if="!vedioCanPlay">
            <img :style="fixStyle" src="../assets/MP4/Kitchen in a house.mp4" alt="">
          </div>
        </div>
      </div>
    </div>


    <!-- 登录区 -->
    <div class="login_box">
      <!-- 头像区 -->
      <div class="avatar_box">
        <img src="../assets/preview.gif" alt="">
      </div>
      <!-- 登录表单区 -->
      <el-form :model="loginform" :rules="loginRules" ref="loginFormRef" label-width="0px" class="login_form">
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input prefix-icon="iconfont icon-user" v-model="loginform.username"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input prefix-icon="iconfont icon-3702mima" v-model="loginform.password" type="password"></el-input>
        </el-form-item>
        <!-- 按钮区 -->
        <el-form-item class="btns">

          <el-button type="success" @click="login">登录</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
          <!-- <el-button @click="fullpage">fullpage</el-button>
          <el-button @click="animation">animation</el-button> -->
        </el-form-item>
      </el-form>
    </div>

  
  </div>
</template>

<script>
// 引入插件
// import { swiper, swiperSlide } from "vue-awesome-swiper";
// import "swiper/dist/css/swiper.css";

 export default {
  //  components: {
  //   swiper,
  //   swiperSlide
  // },
    data() {
      return {
        //  swiperOption: {
        //   loop: true,
        //   autoplay: {
        //     delay: 3000,
        //     stopOnLastSlide: false,
        //     disableOnInteraction: false
        //   }
        // },
//背景视频
        vedioCanPlay: false,
        fixStyle: '',
//背景视频
        loginform: {
          username:'admin',
          password:'123456'
        },

        // 表单校验
      loginRules: {
         username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
         password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 15, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
      },
   
      }
    },
    methods: {
      fullpage() {
        this.$router.push('/fullPage')
      },
      animation(){
        this.$router.push('/animation')
      },
 
//背景视频
       canplay() {
        this.vedioCanPlay = true
      },
//背景视频
      //点击重置按钮
      resetLoginForm(){
        console.log(this);
        this.$refs.loginFormRef.resetFields()
      },
      //登录
      login(){
        this.$refs.loginFormRef.validate(async valid => {
          if (valid) {
            const {data:res,request:request} =await this.$http.post('login',this.loginform);
            console.log(res);
            console.log(request.readyState);
            if (request.readyState===4) {
              if(res.meta.status>=200&&res.meta.status<300){
                this.$notify({
                  title: res.meta.msg,
                  message: '欢迎使用本系统',
                  type: 'success'
                });
                // 将token保存在session Storage中
                window.sessionStorage.setItem('token',res.data.token)
                this.$router.push('/home')
              }else{
                this.$notify.error({
                  title: res.meta.msg,
                  message: '登录失败',
                });
                
                this.$router.push('/view')
                // window.location.href = "https://mb.mituo.cn/mui111/"
              }
            }else{
              this.$message.error("readyState状态错误")
            }
          }
        })
      }
    },
//背景视频
     mounted: function() {
      window.onresize = () => {
        const windowWidth = document.body.clientWidth
        const windowHeight = document.body.clientHeight
        const windowAspectRatio = windowHeight / windowWidth
        let videoWidth
        let videoHeight
        if (windowAspectRatio < 0.5625) {
          videoWidth = windowWidth
          videoHeight = videoWidth * 0.5625
          this.fixStyle = {
            height: windowWidth * 0.5625 + 'px',
            width: windowWidth + 'px',
            'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
            'margin-left': 'initial'
          }
        } else {
          videoHeight = windowHeight
          videoWidth = videoHeight / 0.5625
          this.fixStyle = {
            height: windowHeight + 'px',
            width: windowHeight / 0.5625 + 'px',
            'margin-left': (windowWidth - videoWidth) / 2 + 'px',
            'margin-bottom': 'initial'
          }
        }
      }
      window.onresize()
    }
  }
//背景视频
</script>
<style lang="less" scoped>
.recommendPage{
  z-index: -1;
}
.recommendPage .swiper-container{
  position: relative;
  width: 100%;
  height: 720px;

}  
.recommendPage .swiper-container .swiper-slide{
  width: 100%;
  line-height: 200px;
  text-align: center;
  img{
    width: 100%;
    height: 100%;
  }
}
//中间盒子样式
.login_box {
  z-index: 1;
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 50px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  box-shadow: 10px 10px 10px rgb(78, 77, 77);
  //新样式
  background: linear-gradient(
    to right bottom,
    rgba(255,255,255,0.6),
    rgba(255,255,255,0.1)
    );
    backdrop-filter: blur(8px);
}
//头像
.avatar_box {
  height: 130px;
  width: 130px;
  border: 1px solid #eee;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 0 10px #ddd;
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: #ddd;
  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #eee;
  }
}
.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box
}
.btns {
  display: flex;
  justify-content:center

}


//背景视频
  .homepage-hero-module,
  .video-container {
    position: relative;
    height: 100vh;
    overflow: hidden;
  }

  .video-container .poster img,
  .video-container video {
    z-index: 0;
    position: absolute;
  }

  .video-container .filter {
    z-index: 1;
    position: absolute;
    // background: rgba(0, 0, 0, 0.4);
  }
</style>